
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Creating a Console for debugging</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#basic, #add_to_bottom {
    margin-bottom: 1em;
}

#demo .yui3-console .yui3-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui3-console .yui3-console-entry-meta {
    margin: 0;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Creating a Console for debugging</h1>

<div class="exampleIntro">
	<p>This example walks through the basics of setting up and logging messages to a YUI Console instance.  Three Console instances are created with slightly different configurations.  All calls to <code>Y.log(..)</code> will be broadcast to every Console.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <h4>Basic Console</h4>
    <div id="basic"></div>
    <p>
        <button type="button" id="toggle_basic">hide console</button>
    </p>

    <h4>New messages added to bottom</h4>
    <div id="add_to_bottom"></div>
    <p>
        <button type="button" id="toggle_atb">show console</button>
    </p>

    <h4>Custom strings</h4>
    <p><em>Rendered in default location (top right)</em></p>
    <p>
        <button type="button" id="toggle_cstrings">show console</button>
    </p>

    <h4>Log some messages</h4>
    <p>
        <input type="text" id="info_text" value="I'm an info message!">
        <button type="button" id="info">log info message</button>
    </p>
    <p>
        <input type="text" id="warn_text" value="I'm a warning!">
        <button type="button" id="warn">log warning</button>
    </p>
    <p>
        <input type="text" id="error_text" value="I'm an error!">
        <button type="button" id="error">log error</button>
    </p>
</div>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    style: 'block' // keeps the Console in the page flow as a block element
}).render( '#basic' );

newOnBottom = new Y.Console({
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false
}).render( "#add_to_bottom" );

customStrings = new Y.Console({
    strings: {
        title : 'Draggable Console with filters!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false
}).plug(Y.Plugin.ConsoleFilters)
  .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
  .render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        cnsl.syncUI(); // to handle any UI changes queued while hidden.
        this.set('innerHTML','hide console');
    }
}

function report(e,type) {
    Y.log(this.get('value'),type);
}

// Display a message in the Console for reference
Y.log("Click the buttons below to log messages");

// Pass the corresponding Console instance to the handler as a second arg
Y.on('click', toggle, '#toggle_basic',    null, basic);
Y.on('click', toggle, '#toggle_atb',      null, newOnBottom);
Y.on('click', toggle, '#toggle_cstrings', null, customStrings);

// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
